@import '~themes/vars';

.demoframe {
  position: relative;
  padding: 58px 22px 18px;
  margin: 0;
  display: block;
  background-color: #fff;
  box-shadow: 0 4px 40px 0 rgb(4 59 85 / 10%);
  height: 756px;
  width: 375px;
  border-radius: 60px;
  overflow: hidden;
  transform: scale(.8);

  iframe {
    padding-top: 40px;
    width: 100%;
    height: 100%;
    margin:0;
    box-sizing: border-box;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
  //  overflow-clip-margin: content-box !important;
    border-style: inset;
    border-color:initial;
    border-image: initial;
    overflow: clip !important;
  }

  .navbar {
    position: absolute;
    padding: 0 22px;
    top:58px;
    left: 0;
    width: 100%;
    height: 40px;
    background: #fff;
    margin: 0;
    display: block;


  }
  .back {
    width: 40px;
    height: 40px;
    position: absolute;
    display: flex;
    align-items: center;
    left: 22px;
    cursor: pointer;
    fill: #333;
  }
  .title {
    color: #333;
    font-size: 19px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    display: block;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .iphoneframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 375px;
    height: 758px;
    background: url("https://nervjs.github.io/taro-ui-theme-preview/static/media/iframe_iphonex.8ea9318b.png");
    background-size: contain;
    pointer-events: none;
  }
}
